﻿(function ($) {
    $.widget("ui.iPodMenu", {
        _init: function () {
            var self = this;
			//Leo:这里加入了id，用于Hide or show
			var containerId=this.element.attr("id")+"_container";
            this.element.addClass("ipod-menu").data("iPodMenu.root", true)
                .wrap($("<div id='"+containerId+"' class='ui-widget ipod-menu-container'><div class='ui-widget-content ipod-menu-content'></div></div>").width(this.options.width));
            this.panelContent = this.element.closest(".ipod-menu-content");
            this.panelContainer = this.element.closest(".ipod-menu-container");
			
            this.createBackPanel();
            this.createNavPanel();
            this.createIndicatorPanel();
			if(this.options.panelBackPos!=false){
				this.options.panelBackPos == "top" ? this.panelContent.before(this.panelBack) : this.panelContent.after(this.panelBack);
			}
            this.element.before(this.panelNav).before(this.panelIndicator);

            // 取消所有菜单项（li）的事件冒泡。
			var clickFun=this.options.click;
			var opts=this.options;
            var foo = function (e) {               
				if($.isFunction(clickFun)){
					clickFun($(e.currentTarget));
					if(opts.target!=false){
						$("#"+containerId).hide();
					}
				}
				e.stopPropagation();	
            }
            var bar = function (e) {
                e.stopPropagation();
                e.preventDefault();
                self.showMenu($(this).children("ul:eq(0)"));
            }
            $.each(this.element.find("li"), function () {
                var li = $(this);
                if (li.children("ul").length > 0) {
                    li.click(bar)
                    // 用来给小图标提供相对定位。
                    .children("a").css("position", "relative")
                    // 给有子菜单的li加上小图标。
                    .append("<span class='ui-icon ui-icon-triangle-1-e' style='position: absolute; right: 3%; top: 50%; margin-top: -8px;'></span>");
                } else {
                    li.click(foo);
                }
            })
            // 添加鼠标悬停的效果。
            // 设置菜单项的样式。
            this.element.find("a").addClass("ui-corner-all ipod-menu-item")
                .hover(function (e) {
                    $(this).addClass("ui-state-hover");
                    e.stopPropagation();
                    e.preventDefault();
                }, function (e) {
                    $(this).removeClass("ui-state-hover");
                    e.stopPropagation();
                    e.preventDefault();
                });
            this.showMenu(this.element, true);
			
			
			//Leo: dropdownList function 
			if(this.options.target!=false){
				var a=this.panelContainer.hide().css("position","absolute");
				$("ul",this.panelContainer).css("position","relative");
			
				var element=this.element;
				var pos=getAbsPosition(this.panelContainer[0]);				
				this.options.target.bind(this.options.targetEvent,function(){	
					var targetPos=getAbsPosition(this);
					a.css("top", pos.top + $(this).outerHeight(true)+targetPos.top).css("left", targetPos.left).show();
					return false;
				});				
			}
        },
        _setData: function (key, value) {
        },
        createBackPanel: function () {
            var self = this;
            // 创建后退按钮区域。
            this.panelBack = $("<div class='ui-state-default ui-state-disabled ipod-menu-back'><span>"+this.options.backText+"</span></div>")
                        .click(function () {
                            if ($(this).hasClass("ui-state-disabled")) return false;
                            var parentMenu = self.currentMenu.parent().parent();
                            self.showMenu(parentMenu, true);
                        });
        },
        createNavPanel: function () {
            // 创建导航区域。
            this.panelNav = $("<div class='ipod-menu-nav'></div>");
        },
        createIndicatorPanel: function () {
            // 创建指示当前菜单父项的区域。
            this.panelIndicator = $("<div class='ipod-menu-indicator'></div>");
        },
        redrawNavPanel: function () {
            var self = this, panelNav = this.panelNav.empty();
            var uls = self.panelContainer.find("ul:visible:not(:last)");
            if (uls.length > 0) {
                uls.each(function (i) {
                    var menu = $(this);
                    var item = $("<span>" + (i == 0 ? self.options.navTitle : menu.siblings('a').text()) + "</span>").click(function () {
                        self.showMenu(menu, true);
                    });
                    panelNav.append(item);
                    item = null;
                });
            } else {
                this.panelNav.append(this.options.navText);
            }
        },
        // 显示菜单的函数。
        // menu：要显示的菜单jquery对象，$(ul)。
        // isBack：是否是回退，点击后退按钮或是点击路径的时候要设为true。
        showMenu: function (menu, isBack) {
            var self = this;
            if (isBack === true) {
                menu.hide();
                menu.find("ul").hide();
                menu.find("a").css("display", "block");
                menu.find("li").removeClass("ui-helper-hidden-accessible");
            } else {
                // 隐藏与上级菜单项相邻的所有菜单项。
                menu.parent().siblings("li").addClass("ui-helper-hidden-accessible");
                // 隐藏上级的菜单项。
                menu.siblings().hide();
            }  // 显示菜单。
            menu.show('slide', { direction: (isBack === true ? 'left' : 'right') }, 500, function () {
                self.redrawNavPanel();
                if (menu.data("iPodMenu.root")) {
                    self.panelIndicator.text(self.options.navTitle);
                }
                else {
                    self.panelIndicator.text(menu.siblings('a').text());
                }
                self.currentMenu = menu;
            });			
			menu.data("iPodMenu.root")?this.panelBack.addClass("ui-state-disabled"):this.panelBack.removeClass("ui-state-disabled");            
        }
    });
    $.extend($.ui.iPodMenu, {
        defaults: {
            // panelBack的位置['top', 'bottom',false] false  不显示
            panelBackPos: 'bottom',
            width: '180px',
			navText:'Please choose an item.',
			navTitle:"Home",
			backText:"Back",
			target:false, //触发显示菜单的控件。
			targetEvent:'click',
			click:false //当每个Item click的是否发生的时间 function(li);
        }
    });
	
	function getAbsPosition(obj) {
        return { left: getAbsoluteLeft(obj), top: getAbsoluteTop(obj) };
    }

    function getAbsoluteLeft(o) {

        var oLeft = o.offsetLeft
        while (o.offsetParent != null) {
            oParent = o.offsetParent;
            oLeft += oParent.offsetLeft;
            o = oParent;
        }
        return oLeft;
    }

    function getAbsoluteTop(o) {

        var oTop = o.offsetTop
        while (o.offsetParent != null) {
            oParent = o.offsetParent;
            oTop += oParent.offsetTop;
            o = oParent;
        }
        return oTop;
    }
})(jQuery);